import React from 'react';
import { Link } from 'react-router';

export default class SearchBar extends React.Component {
    constructor(props) {
        super(props);
        this.onInputChange = this.onInputChange.bind(this);
        this.onBtnSearch = this.onBtnSearch.bind(this);
        this.state={key:""};
    }

    onInputChange(e) {
        this.setState({
            key:e.target.value
        })
    }

    onBtnSearch() {
        this.props.onSearch(this.state.key);
    }

    render() {
        return (
            <div style={{height: "2.4rem"}}>
                <Link to={this.props.backTo}><i className="fa fa-arrow-left" style={{width: "2rem",marginLeft:"0.2rem",marginTop:"0.4rem",fontSize: "1.6rem", color:"#fff", float:"left"}}></i></Link>
                <input value={this.state.key} onChange={this.onInputChange} style={{width: "calc( 100% - 5rem )",marginTop:"0.4rem",paddingLeft:"0.2rem",height: "1.6rem", border: "solid 1px #d9d9d9"}}/>
                <i onClick={this.onBtnSearch} className="fa fa-search" style={{width: "2rem",fontSize: "1.6rem",paddingRight:"0.2rem",float: "right",color:"#fff", textAlign:"right",marginTop:"0.4rem"}}></i>
            </div>
        );
    }

}